<template>
	<view class = "content">
		<view class="status-bar">
			<view class="iconfont icon-gengduo" @click="toUserCenter"></view>
		</view>
		<view class="no-login" v-if="!loginStatus">
			<view class="top">
				<view class="hint-img">
					<image src="../../static/testImg/avatrjpg.jpg" mode="widthFix"></image>
				</view>
				<view class="hint-text" @click="toLogin">
					<view class="nologin-hint">暂未登录！</view>
					<view class="tologin-hint">立即登录 &gt;</view>
				</view>
			</view>
		</view>
		<view class="login" v-else>
			<view class="login-top">
				<view class="avatar-img">
					<image :src="$store.user.avatarUrl" mode="widthFix"></image>
				</view>
				<view class="user-info-block">
					<view class="nick_name">{{user.nickName}}</view>
					<view class="uid">UID: {{user.uid}}</view>
				</view>
			</view>
		</view>
		
		<view class="login-content">
			<view class="more-func-title">更多功能</view>
			<view class="comtent-btn">
				<view class="btn-item" @click="toQuestionDetail">
					<image src="../../static/imgs/mycenter/soudaan.png" />
					<view class="btn-text">搜答案</view>
				</view>
				<view class="btn-item" @click="toDataDetail">
					<image src="../../static/imgs/mycenter/zhaoziliao.png" />
					<view class="btn-text">找资料</view>
				</view>
				<view class="btn-item" @click="toECTDetail">
					<image src="../../static/imgs/mycenter/yingyu.png" />
					<view class="btn-text">英语</view>
				</view>
				<view class="btn-item" @click="toComputerDetail">
					<image src="../../static/imgs/mycenter/jisuanjierji.png" />
					<view class="btn-text">计算机二级</view>
				</view>
				<view class="btn-item" @click="toLostDetail">
					<image src="../../static/imgs/mycenter/shiwuzhaolin.png" />
					<view class="btn-text">失物招领</view>
				</view>
				<view class="btn-item" @click="toLoveWallDetail">
					<image src="../../static/imgs/mycenter/biaobaiqiang.png" />
					<view class="btn-text">表白墙</view>
				</view>
				<view class="btn-item" @click="toSchoolDetail">
					<image src="../../static/imgs/mycenter/activity.png" />
					<view class="btn-text">校园活动</view>
				</view>
			</view>
		</view>
		<view class="study-self">
			<view class="more-func-title">自习室</view>
			<view class="diligence-img">
				<image src="../../static/imgs/mycenter/tiandaochouqin.png" mode="widthFix"></image>
			</view>
			<view class="self-wrap">
				<view class="kaoyan" @click="kaoyan">
					<view class="top">
						<view class="l">
							<view class="title">考研自习室</view>
							<view class="subtitle">快来和小伙伴们一起努力吧</view>
						</view>
						<view class="r">
							<image src="../../static/imgs/mycenter/kaoyan.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="bottom">
						<view class="btn">加入自习室</view>
					</view>
				</view>
				<view class="yinyu" @click="yingyu">
					<view class="top">CET</view>
					<view class="bottom">
						<view class="btn">加入自习室</view>
					</view>
				</view>
				<view class="kaozheng" @click="kaozheng">
					<view class="top">
						<image src="../../static/imgs/mycenter/zhengshu.png" mode="widthFix"></image>
					</view>
					<view class="center">
						<view class="title">考证自习室</view>
					</view>
					<view class="bottom">
						<view class="btn">加入自习室</view>
					</view>
				</view>
				<view class="zixi" @click="zixi">
					<view class="top">
						<image src="../../static/imgs/mycenter/putongzixi.png" mode="widthFix"></image>
					</view>
					<view class="bottom">
						<view class="btn">加入自习室</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginStatus: true,
				user:{}
			};
		},
		created() {
			
		},
		mounted() {
			
		},
		onLoad() {
			// this.loginStatus = this.$store.loginStatus
			// console.log(this.loginStatus, this.$store.loginStatus)
			this.user = this.$store.user
		},
		onShow() {
			this.user = this.$store.user
		},
		methods:{
			toLogin(){
				uni.navigateTo({
					url:"../login/login"
				})
			},
			toQuestionDetail(){
				uni.navigateTo({
					url:"../searchQuestion/searchQuestion"
				})
			},
			toDataDetail(){
				uni.navigateTo({
					url:"../dataList/dataList"
				})
			},
			toECTDetail(){
				uni.navigateTo({
					url:"../cetExam/cetExam"
				})
			},
			toComputerDetail(){
				uni.navigateTo({
					url:"../computerExam/computerExam"
				})
			},
			toLostDetail(){
				uni.navigateTo({
					url:"../lost/lost"
				})
			},
			toLoveWallDetail(){
				uni.navigateTo({
					url:"../loveWall/loveWall"
				})
			},
			toSchoolDetail(){
				uni.navigateTo({
					url:"../schoolActivity/schoolActivity"
				})
			},
			toUserCenter(){
				uni.navigateTo({
					url:"../userCenter/userCenter"
				})
			},
			kaoyan(){
				uni.navigateTo({
					url:"../selfStudyKY/selfStudyKY"
				})
			},
			yingyu(){
				uni.navigateTo({
					url:"../selfStudyECT/selfStudyECT"
				})
			},
			kaozheng(){
				uni.navigateTo({
					url:"../selfStudyKZ/selfStudyKZ"
				})
			},
			zixi(){
				uni.navigateTo({
					url:'../selfStudy/selfStudy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.status-bar{
			position: fixed;
			top: var(--status-bar-height);
			left: 0;
			width: 100%;
			z-index: 10;
			view{
				float: right;
				margin-right: 30rpx;
				font-size: 50rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
		.no-login{
			.top{
				height: 400rpx;
				background-color: $fun-theme-color;
				display: flex;
				align-items: center;
				.hint-img{
					margin: var(--status-bar-height) 40rpx 0 40rpx;
					image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx #FFFFFF solid;
					}
				}
				.hint-text{
					margin: var(--status-bar-height) 20rpx 0 20rpx;
					color: #FFFFFF;
					.nologin-hint{
						font-size: 50rpx;
					}
					.tologin-hint{
						margin: 20rpx 0;
						font-size: 30rpx;
					}
				}
			}
		}
		.login{
			height: 400rpx;
			background-color: $fun-theme-color;
			display: flex;
			align-items: center;
			background-image: url('../../static/testImg/VCG21518d12b17.jpg');
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			.login-top{
				position: absolute;
				left: 40rpx;
				bottom: -50rpx;
				display: flex;
				.avatar-img{
					margin: 0 20rpx;
					image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx #FFFFFF solid;
					}
				}
				.user-info-block{
					margin: 30rpx 20rpx 10rpx 0;
					.nick_name{
						font-size: 40rpx;
						color: #FFFFFF;
						text-shadow: 2rpx 2rpx 2rpx #000;
					}
					.uid{
						color: #FFFFFF;
						font-size: 25rpx;
						text-shadow: 2rpx 2rpx 2rpx #000;
					}
				}
			}
			
		}
		.more-func-title{
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx $fun-theme-color solid;
			&::before{
				display: inline-block;
				content: "";
				background-color: $fun-theme-color;
				width: 10rpx;
				height: 50rpx;
				margin-right: 15rpx;
			}
		}
		.login-content{
			margin-top: 80rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			.comtent-btn{
				display: flex;
				justify-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.btn-item{
					display: flex;
					flex-direction: column;
					justify-items: center;
					justify-content: center;
					width: 150rpx;
					margin: 25rpx 10rpx;
					image{
						width: 50rpx;
						height: 50rpx;
						margin: 0 auto;
					}
					.btn-text{
						font-size: 26rpx;
						text-align: center;
						margin-top: 20rpx;
					}
				}
			}
		}
		.diligence-img{
			margin-top: 100rpx;
			image{
				width: 700rpx;
			}
		}
		.study-self{
			margin: 20rpx;
			.self-wrap{
				display: flex;
				flex-wrap: wrap;
				.kaoyan{
					width: 400rpx;
					height: 300rpx;
					background-color: #ffab00;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;
					.top{
						display: flex;
						margin-top: 30rpx;
						align-items: center;
						.l{
							.title{
								text-align: center;
								font-size: 40rpx;
								font-weight: bold;
								color: #FFFFFF;
							}
							.subtitle{
								margin-top: 10rpx;
								font-size: 26rpx;
								text-align: center;
								line-height: 1.2;
								color: #FFF;
							}
						}
						.r{
							image{
								width: 170rpx;
							}
						}
					}
					.bottom{
						margin-top: 30rpx;
						.btn{
							background-color: #8070d8;
							border-radius: 20rpx;
							width: 300rpx;
							margin: 0 auto;
							color: #FFFFFF;
							font-size: 30rpx;
							text-align: center;
							height: 60rpx;
							line-height: 60rpx;
						}
					}
				}
				.yinyu{
					width: 250rpx;
					height: 300rpx;
					background-color: #f77976;
					border-radius: 20rpx;
					padding: 10rpx;
					margin-left: 20rpx;
					box-sizing: border-box;
					.top{
						margin-top: 60rpx;
						font-size: 60rpx;
						text-align: center;
						color: #FFFFFF;
						font-weight: bold;
					}
					.bottom{
						margin-top: 60rpx;
						.btn{
							background-color: #a5ffd6;
							border-radius: 20rpx;
							width: 200rpx;
							margin: 0 auto;
							color: #FFFFFF;
							font-size: 30rpx;
							text-align: center;
							height: 60rpx;
							line-height: 60rpx;
						}
					}
				}
				.kaozheng{
					margin-top: 20rpx;
					width: 400rpx;
					height: 280rpx;
					background-color: #52e3ee;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;
					.top{
						image{
							width: 150rpx;
							margin: 10rpx auto;
						}
						width: 150rpx;
						margin: 0 auto;
					}
					.center{
						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}
					.bottom{
						margin-top: 10rpx;
						.btn{
							background-color: #ff7400;
							border-radius: 20rpx;
							width: 300rpx;
							margin: 0 auto;
							color: #FFFFFF;
							font-size: 30rpx;
							text-align: center;
							height: 60rpx;
							line-height: 60rpx;
						}
					}
				}
				.zixi{
					margin-top: 20rpx;
					width: 250rpx;
					height: 280rpx;
					background-color: #d883ff;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
					.top{
						width: 150rpx;
						margin: 120rpx auto 0 auto;
						image{
							width: 150rpx;
						}
					}
					.bottom{
						.btn{
							background-color: #42d500;
							border-radius: 20rpx;
							width: 200rpx;
							margin: 0 auto;
							color: #FFFFFF;
							font-size: 30rpx;
							text-align: center;
							height: 60rpx;
							line-height: 60rpx;
						}
					}
				}
			}
		}
	}
</style>
